import React from 'react'
import {Text, View, TouchableOpacity, FlatList} from "react-native";
import Style from "../common/style"
import NativeApi from "../common/NativeApi"
import NavAction from "../common/nativation-action"

export default class HomePage extends React.Component {

    state = {
        loading: true,
        loadResult: false,
        msg: "加载中...",
        menus: [],
    };

    componentDidMount() {
        let url = 'http://shuijinglingsos.gitee.io/blog/RnLearnServer/home.json?' + new Date().getTime();

        fetch(url, {cache: "reload"}).then((response) => {
            console.log("成功：", response);
            return response.json();
        }).then((responseJson) => {
            this.setState({
                loading: false,
                loadResult: true,
                menus: responseJson,
            })
        }).catch((error) => {
            console.log("失败：", error.message);
            this.setState({
                loading: false,
                loadResult: false,
                msg: error.message,
            })
        })
    }

    render() {
        return (
            <View style={Style.page}>
                <Text style={Style.title}>
                    React Native Learn
                </Text>

                {this.state.loading ? this.loading() : this.loadComplete(this.state)}

            </View>
        )
    }

    loading() {
        return (
            <View style={[{flex: 1}, Style.center]}>
                <Text>{this.state.msg}</Text>
            </View>
        )
    }

    loadComplete(state) {
        if (state.loadResult) {
            return (
                <FlatList data={this.state.menus}
                          renderItem={({item, index}) => this.loadItem(item, index)}
                />
            );
        } else {
            return this.loading();
        }
    }

    loadItem(item, index) {
        let text = item.name;
        if (item.version) {
            text += " - " + item.version;
        }
        return (
            <TouchableOpacity key={index} style={[Style.text, {marginLeft: 10, marginRight: 10}]}
                              onPress={() => this.itemClick(item)}>
                <Text style={{fontWeight:'bold',fontSize:16,color:'black'}}>{text}</Text>
                <Text>{item.url}</Text>
            </TouchableOpacity>
        )
    }

    itemClick(item) {
        switch (item.action) {
            case NavAction["react-page"]:
                NativeApi.openReactActivity(JSON.stringify(item), "").then((data) => {
                    this.setState({
                        result: data
                    })
                }).catch((err) => {
                    this.setState({
                        result: err.code + ":" + err.message
                    })
                });
                break;

            case NavAction["native-page"]:
                NativeApi.openActivity(item.url, "我是通过类名打开的").then((data) => {
                    this.setState({
                        result: data
                    })
                }).catch((err) => {
                    this.setState({
                        result: err.code + ":" + err.message
                    })
                });
                break;

            case NavAction["native-action"]:
                NativeApi.runAction(item.url, "我是通过action打开的").then((data) => {
                    this.setState({
                        result: data
                    })
                }).catch((err) => {
                    this.setState({
                        result: err.code + ":" + err.message
                    })
                });
                break;

            case NavAction.scheme:
                NativeApi.runScheme(item.url, "我是通过scheme名打开的").then((data) => {
                    this.setState({
                        result: data
                    })
                }).catch((err) => {
                    this.setState({
                        result: err.code + ":" + err.message
                    })
                });
                break;

            case NavAction["react-fragment"]:
                let param = {
                    a: 4,
                    b: 5,
                    c: 6,
                };
                NativeApi.openReactFragmentActivity(JSON.stringify(item), JSON.stringify(param)).then((data) => {
                    this.setState({
                        result: data
                    })
                }).catch((err) => {
                    this.setState({
                        result: err.code + ":" + err.message
                    })
                });
                break;
        }
    }

}
